<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>话费充值</title>
<link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    padding: 20px;
  }
  .container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  h1 {
    color: #1890ff;
    text-align: center;
    margin-bottom: 30px;
  }
  .form-group {
    margin-bottom: 20px;
  }
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
  }
  input[type="text"], 
  input[type="number"],
  input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  .btn-recharge {
    background: #1890ff;
    color: white;
    border: none;
    padding: 12px 20px;
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .btn-recharge:hover {
    background: #40a9ff;
  }
  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 1050;
    width: 350px;
  }
  .modal h3 {
    margin-top: 0;
    color: #1890ff;
    text-align: center;
  }
  .modal-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-wx {
    background: #07C160;
    color: white;
  }
  .btn-zfb {
    background: #1677FF;
    color: white;
  }
  .btn-cancel {
    background: #f5f5f5;
    color: #666;
  }
</style>
</head>
<body>
<div class="container">
  <h1>用户话费充值</h1>
  <form id="rechargeForm">
    <div class="form-group">
      <label for="phone">充值的手机号</label>
      <input type="text" id="phone" name="phone" required 
             pattern="^139\d{8}$" title="请输入139开头的11位手机号"
             value="${card_numb}" placeholder="请输入手机号">
    </div>
    <div class="form-group">
      <label for="amount">充值金额（元）</label>
      <input type="number" id="amount" name="amount" 
             min="10" max="1000" required placeholder="10-1000元">
    </div>
    <button type="button" class="btn-recharge" onclick="showPaymentModal()">立即充值</button>
  </form>
</div>

<div id="paymentModal" class="modal">
  <h3>选择支付方式</h3>
  <button class="modal-btn btn-wx" onclick="selectPayment('wx')">微信支付</button>
  <button class="modal-btn btn-zfb" onclick="selectPayment('zfb')">支付宝支付</button>
  <button class="modal-btn btn-cancel" onclick="closeModal('paymentModal')">取消</button>
</div>

<div id="passwordModal" class="modal">
  <h3>请输入支付密码</h3>
  <input type="password" id="password" placeholder="6位数字密码" maxlength="6" 
         class="form-control" style="margin-bottom: 15px;">
  <button class="modal-btn btn-wx" onclick="submitPayment()">确认支付</button>
  <button class="modal-btn btn-cancel" onclick="closeModal('passwordModal')">取消</button>
</div>

<script>
// 原有JavaScript逻辑保持不变
let selectedPayment = "";

function showPaymentModal() {
  if (!$("#rechargeForm")[0].checkValidity()) {
    alert("请填写正确的手机号和金额");
    return;
  }
  $("#paymentModal").show();
}

function selectPayment(type) {
  selectedPayment = type;
  $("#paymentModal").hide();
  $("#passwordModal").show();
}

function closeModal(modalId) {
  $("#" + modalId).hide();
  selectedPayment = "";
}

function submitPayment() {
  const password = $("#password").val();
  if (!/^\d{6}$/.test(password)) {
    alert("密码必须是6位数字");
    return;
  }

  $.post("${pageContext.request.contextPath}/user/recharge", {
    phone: $("#phone").val(),
    amount: $("#amount").val(),
    paymentType: selectedPayment,
    password: password
  }, function(response) {
    if (response.success) {
      alert("充值成功！");
      location.reload();
    } else {
      alert("支付失败: " + response.message);
    }
  });
}
</script>
</body>
</html>
